<template>
    <el-button type="primary" size="default" @click="emit('setState',1)" icon="ele-Plus" :disabled="!category3Id">添加SPU</el-button>
    <el-table :data="spuPageList" border stripe :style="{margin: '30px 0'}">
        <el-table-column type="index" width="80" label="序号"/>
        <el-table-column label="SPU名称" prop="spuName"></el-table-column>
        <el-table-column label="SPU描述" prop="description"></el-table-column>
        <el-table-column label="操作">
            <template #="{row}">
                <el-button type="primary" size="small" @click="addSku(row)" icon="ele-Plus" title="添加SKU"></el-button>
                <el-button type="primary" size="small" @click="emit('setState',1,row)" icon="ele-Edit" title="编辑SKU"></el-button>
                <el-button type="info" size="small" @click="" icon="ele-Warning" title="查看SKU"></el-button>
                <el-button type="danger" size="small" @click="deleteSpu(row)" icon="ele-Delete" title="删除SKU"></el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            v-model:current-page="page"
            v-model:page-size="limit"
            :page-sizes="[3, 5, 7, 9]"
            layout="prev, pager, next,sizes,total"
            :total="total" 
            :pager-count="5"
            >
    </el-pagination>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { ElMessage } from 'element-plus';

export default defineComponent({
    name: "SpuList",
});
</script>

<script setup lang="ts">
    import {ref,watch} from 'vue'
    import useAttrStore from '@/stores/attr'
    import {storeToRefs} from 'pinia'
    import {requestSpuPage, type reqSpuListType,type reqSpuInfoType, requestDeleteSpu } from '@/api/spu'

    const attrStore = useAttrStore()
    const {category3Id} = storeToRefs(attrStore)
    //接收自定义事件
    const emit = defineEmits<{
        (event:'setState',state:number,row?:reqSpuInfoType):void
    }>()
    //初始页码数据
    const page = ref(1)
    const limit = ref(3)
    const total = ref(0)
    //定义分页列表数据初始值
    const spuPageList = ref<reqSpuListType>([])
    //获取spu分页列表
    const getSpuPageList = async () => {
        try{
            //发送请求
            const re = await requestSpuPage(page.value,limit.value,category3Id.value as number)
            //赋值分页列表
            spuPageList.value = re.records
            total.value = re.total
        }catch(e){
            ElMessage.error('获取spu分页列表失败')
        }
    }
    //监听category3Id,获取spu分页列表
    watch(category3Id,() => {
        if(category3Id.value===null){
            spuPageList.value = []
            total.value = 0
            return
        }
        getSpuPageList()
    },{immediate:true})
    //监听页码,重新获取分页列表
    watch([page,limit],() => {
        if(category3Id.value===null) return
        getSpuPageList()
    })

    //删除spu
    const deleteSpu = async (row:reqSpuInfoType) => {
        try {
            await requestDeleteSpu(row.id as number)
            ElMessage.success('删除成功')
            //重新请求
            getSpuPageList()
        } catch (e) {
            ElMessage.error('删除失败')
        }
    }
    //添加sku
    const addSku = (row:reqSpuInfoType) => {
        emit('setState',2,row)
    }
</script>